<!DOCTYPE html> 
<html lang="ja"> 
    <head> 
        <meta charset="utf-8"> 
        <title>TM Lib</title>
        
        <style>
            * {
                margin: 0;
                padding: 0;
            }
        </style>
        
        <script type="text/javascript" src="./../../src/tmlib.js"></script>
        <script>
            var Circle = null;
            var canvas = null;
            TM.loadScript("dom", "dom");
            TM.loadScript("dom", "canvas");
            TM.loadScript("app", "element");
            TM.loadScript("app", "game-element", function(){
                
                Circle = TM.createClass({
                    
                    superClass: TM.App.GameElement,
                    
                    init: function(name) {
                        TM.App.GameElement.prototype.init.apply(this);
                        
                        this.x = Math.floor(Math.random()*(window.innerWidth-100));
                        this.y = Math.floor(Math.random()*(window.innerHeight-100));
                        this.width = 100;
                        this.height = 100;
                        this.radius = 50;
                        this.name = name;
                        this.fillStyle = "white";
                        this.color = "black";
                        
                        this.v = 0;
                        
                        this.isMouseDown = false;
                    },
                    
                    update: function() {
                        
                        this.y += this.v;
                        this.v+=1;
                        if (this.y > window.innerHeight - this.radius) {
                            this.y = window.innerHeight - this.radius;
                            this.v *= -0.5;
                        }
                        
                        // this.x += 1;
                        // if (this.x > 1000) return false;
                        if (this.isMouseDown) {
                            this.x = canvas.mouse.x;
                            this.y = canvas.mouse.y;
                        }
                    },
                    
                    draw: function(ctx) {
                        ctx.fillStyle = this.fillStyle;
                        ctx.strokeStyle = this.color;
                        
                        ctx.beginPath();
                        ctx.arc(0, 0, this.radius, 0, Math.PI*2, false);
                        ctx.fill();
                        ctx.stroke();
                        ctx.closePath();
                        /*
                        ctx.fillRect(this.x, this.y, this.width, this.height);
                        ctx.strokeRect(this.x, this.y, this.width, this.height);
                        */
                    },
                    
                    isHitPoint: function(x, y) {
                        if (((this.x-x)*(this.x-x)+(this.y-y)*(this.y-y)) < this.radius*this.radius) {
                            return true;
                        }
                        return false;
                    },
                    
                    onTouch: function() {
                        console.log(this.name);
                    },
                    
                    onMouseDown: function() {
                        this.fillStyle = "red";
                        
                        if (Circle.target == null) {
                            this.isMouseDown = true;
                            Circle.target = this;
                        }
                        this.v = 0;
                    },
                    
                    onMouseUp: function() {
                        this.fillStyle = "white";
                        this.isMouseDown = false;
                        Circle.target = null;
                    },
                    
                    onMouseMove: function() {
                        console.log("move");
                        // this.color = "red";
                    },
                    
                    onMouseOver: function() {
                        this.color = "red";
                    },
                    
                    onMouseOut: function() {
                        this.color = "black";
                    }
                    
                });
                
                Circle.target = null;
                
            });
            
            
            /*
             * Element Test
             */
            TM.main(function()
            {
                /*
                console.group("【element】");
                console.groupEnd();
                */
                
                canvas = tm.DOM.Canvas(tm.$create("canvas"));
                canvas.fullScreen();
                canvas.mouse;
                var context= canvas.element.getContext("2d");
                document.body.appendChild(canvas.element);
                var root = TM.App.GameElement();
                for (var i=0; i<10; ++i) {
                    root.addChild( Circle("a"+i) );
                }
                
                /*
                canvas.event.click(function(){
                    root.addChild( Circle("hoge") );
                });
                */
                
                /*
                */
                tm.DOM.Element(document).key.down(TM.hotkeys.left, function(){
                    canvas.x -= 5;
                });
                tm.DOM.Element(document).key.down(TM.hotkeys.right, function(){
                    canvas.x += 5;
                });
                
                /**
                 * main loop
                 */
                tm.setLoop(function(){
                    root._update();
                    
                    context.clearRect(0, 0, window.innerWidth, window.innerHeight);
                    context.fillStyle = "black";
                    context.strokeStyle = "black";
                    root._draw(context);
                    
                    
                    for (var i=0; i<root.children.length; ++i) {
                        var target = root.children[i];
                        
                        for (var j=0; j<root.children.length; ++j) {
                            var other = root.children[j];
                            
                            if (target!=other && target.isHitElement(other)) {
                                console.log("hit!");
                            }
                        }
                    }
                    
                    
                    // マウスムーブ
                    root._checkEvent(function(elm){
                        if (elm.isHitPoint(canvas.mouse.x, canvas.mouse.y)) {
                            return true;
                        }
                        return false;
                    }, "onMouseMove");
                    
                    // マウスダウン
                    root._checkEvent(function(elm){
                        if (elm.eventFlags["onMouseDown"]==true) return false;
                        
                        if (elm.eventFlags["onMouseMove"]==true && canvas.mouse.button != 0) {return true;}
                    }, "onMouseDown");
                    
                    // マウスアップ
                    root._checkEvent(function(elm){
                        if (elm.eventFlags["onMouseUp"]==true) return false;
                        
                        if (elm.eventFlags["onMouseMove"]==true && canvas.mouse.button == 0) {return true;}
                    }, "onMouseUp");
                    
                    // マウスオーバー
                    root._checkEvent(function(elm){
                        if (elm.eventFlags["onMouseOver"]==true) return false;
                        
                        if (elm.isHitPoint(canvas.mouse.x, canvas.mouse.y)) {
                            return true;
                        }
                        return false;
                    }, "onMouseOver");
                    
                    // マウスアウト
                    root._checkEvent(function(elm){
                        if (elm.eventFlags["onMouseOut"]==true) return false;
                        
                        if (elm.isHitPoint(canvas.mouse.x, canvas.mouse.y)) {
                            return false;
                        }
                        return true;
                    }, "onMouseOut");
                    
                }, 1000.0/30);
            });
            
        </script>

    </head>
    
    <body>
    </body>
</html>
